Re-designing the Neosporin site was an interesting and complex project because it required combining 3 different Neosporin brand lines: lip care, wound care and eczema under one site. The new site is to be one united Neosporin brand site focusing on healing comprimised skin.
The first step was creating a site map that visually shows where the existing pages are being used. Due to the a limited timeline and resources, existing templates had to be used leveraging the existing Eczema Essentials site. In blue I show the pages of this existing site, in yellow the migration of the wound care site, and in red, the lip care site which lives on its own, but leverages our newly combined site map. As most pages were migrating, few new pages are being created.
Site map was created using Omnigraffle.
Several versions of the design were explored before settling on this one, as it was the most holistic and represented all the product lines equally. Additionally, the site shows real life situations which can lead to cuts, burns, scrapes and etc where people would need to take care of their compromised skin and learn the proper way to heal it.
Wireframes were created using Axure 6.0
Visual drop down menu showing off the extended product line.
Another version of the homepage featured actual products below the main header.
It was important for Neosporin to focus on education and the proper way to take care of cuts, burns and etc. There are many myths out there about wound care so it was important to show how to properly take care of wounds and the products that can help accelerate healing.
The new product landing page features all the products but easily lets users filter by category using anchor links and explore everything from travel to children's products.
Original Neosporin site.
The new homepage created by our design team based on my wireframes.
Mega drop for easy product selection.
The freshly designed education section.
Updated product page that clearly shows the product categories but also gives information, ratings (as they become available) and purchase options for each product.
Check out the entire new site at neosporin.com
